<template>
	<view>
		<!-- like.png -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="header header-top-h5">
				<!-- #endif -->
				<scroll-view scroll-x="true" class="scroll">
					<view class="list">
						<view :class="index==navIndex?'active item':'item'" @click="selectNav(item,index)"
							v-for="(item,index) in category.category" :key="index">{{item.title}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="content">
				<scroll-view scroll-y="true" style="height: 90vh;" @scrolltolower="lower">
					<view class="wrap">
						<!--  @click="detail(item)" -->
						<view class="item" v-for="(item,index) in list" :key="index">
							<!-- <image :src="showImg+item.url" mode="aspectFill"></image> -->
							<view class="info">
								<view class="title">{{item.content_title}}</view>
								<view class="desc person"><text>联系人：{{item.name}}</text><text>联系电话：{{item.phone}}</text>
								</view>
								<!-- <view class="desc">{{item.phone}}</view> -->
								<view class="desc">{{item.end_date}}</view>
								<view class="bottom">
									<view class="right" @click.stop="cancel(item,index)">
										<image src="https://www.atuanjian.com/appletStatic/static/like.png" mode=""></image>
										<text>撤回分享</text>
									</view>
								</view>
							</view>
						</view>
						<view class="list" style="padding-bottom: 60rpx;" v-if="list.length==0">
							<u-empty mode="list" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/list.png">
							</u-empty>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
</template>

<script>
	import {
		productShareUndo,
		userShare
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				showImg: '',
				list: [],
				page: 0,
				totalPage: 0,
				userInfo: JSON.parse(uni.getStorageSync('userInfo') || {}),
				navIndex: 0,
				cateId: '',
				cateUrl: '',
				category: null,
				uEmptyText: '数据加载中...',
			}
		},
		methods: {
			async productShareUndo(data) {
				return await productShareUndo(data)
			},
			async userShare(data) {
				return await userShare(data)
			},
			// detail(item){
			// 	uni.navigateTo({
			// 		url:'/pagesA/detail/case?id='+item.id
			// 	})
			// },
			// 取消收藏
			cancel(item, index) {
				uni.showLoading()
				let data = {
					token: this.userInfo.token,
					id: item.id
				}
				this.productShareUndo(data).then(res => {
					console.log('取消成功', data)
					uni.hideLoading()
					this.list.splice(index, 1)

				}).catch(err => {

				})
			},
			selectNav(item, index) {
				if (this.navIndex != index) {
					this.cateId = item.id
					this.cateUrl = item.cat_url
					this.navIndex = index
					this.page = 0
					this.list = []
					this.getList()
				}
			},
			getList() {
				let data = {
					token: this.userInfo.token,
					p: this.page,
					n: 10
				}
				if (this.cateId) {
					data = Object.assign(data, {
						cat_id: this.cateId,
						table: this.cat_url
					})
				}
				this.userShare(data).then(res => {
					console.log('获取列表', res)
					if (res.count < 1) {
						this.$data.uEmptyText = '暂无数据';
						return false;
					}
					this.totalPage = Math.ceil(res.count / 10)
					this.category = res
					this.list = [...this.list, ...res.list]
				})

			},
			lower() {
				if (this.page < this.totalPage - 1) {
					this.page++
					this.getList()
				}
			}
		},
		onLoad() {
			this.showImg = this.$config.showImgApi;
			this.getList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.header {
		padding: 28rpx 0 28rpx 24rpx;

		.scroll {
			height: 64rpx;

			.list {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-flow: row nowrap;
				white-space: nowrap;

				.item {
					padding: 0 44rpx;
					line-height: 64rpx;
					border-radius: 32rpx;
					background-color: #FFFFFF;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-right: 24rpx;
				}

				.active {
					background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%);
					color: #FFFFFF;
				}
			}

		}
	}

	.content {
		.wrap {
			padding: 0 30rpx;
			background-color: #FFFFFF;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-flow: row nowrap;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;

				image {
					width: 256rpx;
					height: 208rpx;
					border-radius: 8rpx;
				}

				.info {
					.title {
						// width: 416rpx;
						height: 76rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 38rpx;
						color: #1A1A1A;
						margin-bottom: 15rpx; // 16
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.desc {
						font-size: 24rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 32rpx;
						color: #888888;
						margin-bottom: 20rpx;
					}

					.person {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.des {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 32rpx;

						text {
							font-size: 24rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 32rpx;
							color: #888888;
						}

						.line {
							width: 2rpx;
							height: 20rpx;
							background-color: #888888;
							margin: 0 12rpx 0 14rpx;
						}
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-flow: row nowrap;

						.left {
							font-size: 20rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 28rpx;
							color: #888888;

							text {
								font-size: 28rpx;
								color: #FF5E00;
							}
						}

						.right {
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex-flow: row nowrap;

							image {
								width: 29rpx;
								height: 25rpx;
								margin-right: 12rpx;
							}

							text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 34rpx;
								color: #888888;
							}
						}
					}
				}
			}
		}
	}
</style>